<template>
	<view class="app-hospital">
		<view class="input-wrapper">
			<!-- s<image class="input-icon" :src="imgUrl('/static/img/icons/search.png')" mode="aspectFill"></image> -->
			<!-- <input type="text" placeholder="搜索分院" /> -->
			<u-search placeholder="搜索分院" @change="changeInput" :showAction="false" @clear="refreshList()"
				:bgColor="'#fff'" @search="refreshList()" v-model="params.name" :clearabled="true"></u-search>
		</view>
<!-- 		<view class="vip-wrapper">
			<view class="vip-item" v-for="index in 4" :key="`vip-item-${index}`">
				<image class="vip-bg" :src="imgUrl('/static/img/imgs/vip-bg.png')" mode="aspectFill"></image>
				<view class="vip-mask"></view>
				<image class="vip-logo" :src="imgUrl('/static/img/imgs/vip-logo.png')" mode="aspectFill"></image>
				<text class="vip-title">亭林医院体检中心</text>
				<text class="vip-subtitle">尊享vip服务</text>
			</view>
		</view> -->

		<view class="filter-wrapper">
			<view class="filter-item" @click="changeBrand">
				<text>品牌<text v-if="brandCurrent!=''">:{{brandCurrent}}</text></text>
			<!-- 	<image class="filter-icon" :src="imgUrl('/static/img/icons/bottom-arrow.png')" mode="aspectFill">
				</image> -->
				<u-icon :name="brandText" size="12"></u-icon>
			</view>

			<!-- <view class="filter-item">
				<text>营业时间</text>
				<image class="filter-icon" :src="imgUrl('/static/img/icons/bottom-arrow.png')" mode="aspectFill">
				</image>
			</view>

			<view class="filter-item">
				<text>体验服务</text>
				<image class="filter-icon" :src="imgUrl('/static/img/icons/bottom-arrow.png')" mode="aspectFill">
				</image>
			</view>-->

			<view class="sort-item" @click="changeOrder()">
				<image class="sort-icon" :src="imgUrl(`/static/img/icons/sort${params.order=='DESC' ? 1 : 2}.png`)"
					mode="aspectFill"></image>
			</view> 
		</view>

		<view class="list-wrapper">
			<view class="list-item" v-for="(item,index) in list" :key="item.id" @click="jumpDetail(item.id)">
				<view class="item-row">
					<image class="item-img" :src="imgUrl(item.logo)" mode="aspectFill"></image>

					<view class="info-wrapper">
						<text>{{item.branchname}}</text>

						<!-- 	<view class="tag-wrapper">
								<text class="tag-active" v-if="index === 1">距您最近</text>
								<text>体检中心</text>
								<text>免费WiFi</text>
							</view> -->
						<view class="location-wrapper">
							<text>{{item.address}}</text>
							<!-- <text>1.5km</text> -->
						</view>
					</view>
				</view>
				<view class="item-split"></view>
				<view class="detail-wrapper">
					<text>查看分院详情</text>
					<uni-icons type="right" size="15" color="#FF7F36"></uni-icons>
				</view>
			</view>
			<view class="loading" v-if="loading">
				<u-loading-icon text="加载中" mode="semicircle" textSize="14"></u-loading-icon>
			</view>
			<view v-if="finished">
				<u-divider text="没有更多了"></u-divider>
			</view>
		</view>
		<u-picker :confirmColor="'#FF7F36'" :show="brandShow" :columns="brandColumns" keyName="label" @confirm="brandConfirm" @close="brandClose"  @cancel="brandClose"></u-picker>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";
	import {
		imgUrl
	} from "../../../utils/global";
	import {
		onLoad,
		onReady,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		getbranchslist
	} from "@/api/hospital"
	const sortType = ref("desc");

	onLoad(async (options) => {
		getList()
	})
	const params = ref({
		page: 1,
		limit: 20,
		name: "",
		type: "",
		order:"DESC"
	})
	const finished = ref(false)
	const loading = ref(false)
	const list = ref([])
	// 获取列表
	const getList = () => {
		if (loading.value) return
		if (finished.value) return
		loading.value = true
		getbranchslist(params.value).then(res => {
			if (params.value.page == 1) {
				list.value = res.data
			} else {
				list.value.push(...res.data);
			}
			finished.value = list.value.length == res.totalCount;
			if (!finished.value) {
				params.value.page = params.value.page + 1
			} else {
				console.log("没有更多了")
			}
			uni.stopPullDownRefresh()
			loading.value = false
		}).catch(err => {
			uni.stopPullDownRefresh()
			loading.value = false
		})
	}
	const brandText=ref("arrow-down-fill")
	const brandShow=ref(false)
	const brandCurrent=ref("")
	const brandColumns=ref([[{
		label:"全部",
		value:0
	},{
		label:"瑞慈",
		value:1
	},{
		label:"美年",
		value:2
	},{
		label:"普惠",
		value:3
	}]])
	// 品牌弹出框
	const changeBrand=()=>{
		brandText.value="arrow-up-fill"
		brandShow.value=true
	}
	const brandConfirm=(event)=>{
		if(event.value[0].value==0){
			params.value.type=""
			brandCurrent.value=""
		}else{
			params.value.type=event.value[0].value
			brandCurrent.value=event.value[0].label
		}
		
		brandClose()
		
		refreshList()
	}
	const brandClose=()=>{
		brandText.value="arrow-down-fill"
		brandShow.value=false
	}
	// 查看详情
	const jumpDetail = (id) => {
		uni.navigateTo({
			url: "/pages/hospital/detail/index?id=" + id
		})
	}
	const changeInput = (event) => {
		if (!event) {
			refreshList()
		}
	}
	const refreshList = () => {
		if (loading.value) return
		params.value.page = 1
		finished.value = false
		getList()
	}
	const changeOrder=()=>{
		if(params.value.order=='DESC'){
			params.value.order="ASC"
		}else{
			params.value.order="DESC"
		}
		refreshList()
	}
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh(() => {
		refreshList()
	})
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom(() => {
		console.log("上拉")
		if (loading.value) return
		getList()
	})
</script>
<style src="./style.scss" scoped />